<template>
  <!-- 介绍歌单组件 -->
  <div class="play_list_detail">
    <div class="pic">
      <img :src="songListDetail.coverImgUrl" alt="" class="pic_url" />
    </div>
    <div class="detail">
      <div class="title">{{ songListDetail.name }}</div>
      <div class="author" v-if="songListDetail.creator">
        <img :src="songListDetail.creator.avatarUrl" alt="" />
        <span class="author_name">{{ songListDetail.creator.nickname }}</span>
        <span class="create_time"
          >{{ getTimer(songListDetail.createTime) }} 创建</span
        >
      </div>
      <div class="func">
        <span class="play" @click="addAllSongToMusicList"> 播放</span>
        <span class="collection"> {{ songListDetail.subscribedCount }}</span>
        <span class="share" v-if="songListDetail.shareCount"
          > {{ songListDetail.shareCount }}</span
        >
        <span class="comment_count" v-if="songListDetail.commentCount"
          > {{ songListDetail.commentCount }}</span
        >
      </div>
      <div class="tag" v-if="songListDetail.tags.length !== 0">
        标签：{{ songListDetail.tags.join("/") }}
      </div>
      <div class="description">介绍：{{ songListDetail.description }}</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed } from "vue";
import { useStore, mapGetters } from "vuex";
import formatDate from "@/utils/formate.js";
export default defineComponent({
  name: "PlayListDetail",
  setup(props, context) {
    const store = useStore();
    // 获取单个歌单的信息
    let songListDetail = computed(
      mapGetters(["getSongListDetail"]).getSongListDetail.bind({
        $store: store,
      })
    );
    // 获取歌单创建事件
    let getTimer = (timer) => {
      return formatDate(new Date(timer));
    };

    // 点击歌单的播放按钮的回调
    let addAllSongToMusicList = () => {
      context.emit("addAllSongToMusicList");
    };
    return {
      songListDetail,
      getTimer,
      addAllSongToMusicList,
    };
  },
});
</script>
<style scoped>
.play_list_detail {
  width: 100%;
  display: flex;
  align-items: center;
}
.pic {
  width: 220px;
  height: 220px;
}
.pic_url {
  width: 100%;
  height: 100%;
  border: 4px solid #ccc;
}
.detail {
  flex: 1;
  padding-left: 40px;
}
.title {
  color: #222;
  font-size: 24px;
  margin-bottom: 10px;
}

.author img {
  width: 40px;
  height: 40px;
}
.author span {
  font-size: 12px;
  margin: 0 10px;
}
.author .author_name {
  color: #0c73c2;
}
.author .create_time {
  color: #888;
}
.func {
  padding: 20px 0;
}
.func span {
  padding: 10px 15px;
  font-size: 14px;
  color: #fff;
  background-color: #555;
  margin: 0 10px;
  border-radius: 6px;
}
.func .play {
  color: #fff;
  background-color: #3e8dd7;
  cursor: pointer;
}
.tag {
  margin-bottom: 10px;
}
.description {
  width: 100%;
}
</style>
